<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>新增设备信息</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/create_update.css" rel="stylesheet">
    <script>
        $(function () {
            $.get("/devices/category", {}, function (data) {
                var category = data.data;

                let length = category.length;
                var option = "";
                for (let i = 0; i < length; i++) {
                    option += '<option name="category" value="' + category[i] + '">' + category[i] + '</option>';
                }

                $("#category").html(option);
            });

            $.get("/devices/status", {}, function (data) {
                var status = data.data;

                let length = status.length;
                var option = "";
                for (let i = 0; i < length; i++) {
                    if (status[i] === "正常") {
                        option += '<option name="status" selected value="' + status[i] + '">' + status[i] + '</option>';
                    } else {
                        option += '<option name="status" value="' + status[i] + '">' + status[i] + '</option>';
                    }
                }

                $("#status").html(option);
            });
        });
    </script>
</head>

<body>
<h1>新增设备信息界面</h1>

<div class="main_body">
    <form id="mainForm">
        <div class="form-group">
            <label for="category">类别:</label>
            <select class="bg-info text-center" id="category" name="category">
                <option name="category" selected value="摄像头">摄像头</option>
                <option name="category" value="遥控器">遥控器</option>
            </select>
        </div>

        <div class="form-group">
            <label for="information">详细信息:</label>
            <input class="form-control " id="information" name="information" placeholder="请输入设备的详细信息" type="text">
        </div>

        <div class="form-group">
            <label for="position">位置:</label>
            <input class="form-control" id="position" name="position" placeholder="请输入设备位置" type="text">
        </div>

        <div class="form-group">
            <label for="status">状态:</label>
            <select class="bg-info text-center" id="status" name="status">
                <option name="status" selected value="正常">正常</option>
                <option name="status" value="异常">异常</option>
            </select>
        </div>

        <div class="text-center form-group">
            <button class="btn btn-default" onclick="resetForm()" style="margin-right: 10px" type="button">重置</button>
            <button class="btn btn-default" type="submit">确认</button>
        </div>
    </form>

    <div class="btn_return">
        <button class="btn btn-info" onclick="javascript:location.href ='index.html';">返回主页</button>
    </div>
</div>


<script>
    function resetForm() {
        var inputs = $("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
        }

        let category = $("#category option");
        category.prop("selected", false);
        category[0].selected = true;

        let status = $("#status option");
        status.prop("selected", false);
        for (let i = 0; i < status.length; i++) {
            if (status[i].value === "正常") {
                status[i].selected = true;
            }
        }
    }

    function confirmChanges() {
        //校验非空
        let i;
        var category = $("#category option");
        for (i = 0; i < category.length; i++) {
            if (category[i].selected) {
                category = category[i].value;
                break;
            }
        }

        let information = $("#information");
        if (information.val() === "") {
            information.addClass("alert-danger")
            return false;
        }
        information.removeClass("alert-danger")
        information = information.val();

        let position = $("#position");
        if (position.val() === "") {
            position.addClass("alert-danger")
            return false;
        }
        position.removeClass("alert-danger")
        position = position.val();

        var status = $("#status option");
        for (i = 0; i < status.length; i++) {
            if (status[i].selected) {
                status = status[i].value;
                break;
            }
        }

        var search = location.search;
        var id = search.split("=")[1];//拿第二个值

        $.ajax({
            url: "/devices", // 请求路径
            type: "post", //请求方式
            data: JSON.stringify({id, category, information, position, status}),
            dataTypes: "json",
            headers: {'Content-Type': 'application/json',},
            success: function (data) {//响应成功后的回调函数
                if (data.code === 1) {
                    alert(data.data);
                    location.href = "index.html";
                } else {
                    alert(data.msg);
                }
            },
            error: function () {//请求响应出现错误会执行的回调函数
                alert("出错啦...")
            },
            dataType: "json"//设置接受到的响应数据的格式
        });

        return false;
    }


    $(function () {
        $("#mainForm").submit(function () {
            return confirmChanges();
        });
    });
</script>
</body>
</html>  